<div ng-form="searchSettingsForm">
  <div class="modal-header ui-draggable-handle">
    <a href="#" class="close" ng-click="$dismiss()">
      <span class="fa fa-times"></span>
    </a>
    <div class="h3 modal-title" translate>Filter Options</div>
  </div>
  <form>
    <div class="modal-body">
      <div class="row">
        <div class="col-sm-12">
          <fieldset>
            <div class="form-group">
              <label for="sort" class="control-label" translate>Sort</label>
              <div class=" ">
                <div class="themable-select dropdown form-control">
                  <button aria-expanded="false" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                    <span class="dropdown-title" translate>Sort</span>
                    <span class="fa fa-caret-down"></span>
                  </button>
                  <ul class="dropdown-menu">
                    <li data-original-index="0">
                      <a data-select-value="" translate>Select sort</a>
                    </li>
                    <li data-original-index="1" ng-repeat="x in ctrl.settings.sort.options track by x.label">
                      <a data-select-value="{$ x.label $}">{$ x.label $}</a>
                    </li>
                  </ul>
                  <select id="sort" name="sort" class="form-control"
                          ng-required="true"
                          ng-options="x as x.label for x in ctrl.settings.sort.options track by x.label"
                          ng-model="ctrl.settings.sort.selected">
                  </select>
                </div>
              </div>
            </div>
            <div class="form-group required"
                 ng-class="{'has-error': searchSettingsForm.name.$invalid && searchSettingsForm.name.$dirty}">
              <label class="required" for="id_resultLimit">
                <span translate>Result Limit</span>
                <span class="hz-icon-required fa fa-asterisk"></span>
              </label>
              <div class=" ">
                <div class="input-group themable-spinner">
                  <input class="form-control"
                         id="id_resultLimit"
                         name="resultLimit"
                         ng-model="ctrl.settings.general.limit"
                         type="number"
                         min="{$ ctrl.settings.general.limit_min $}"
                         max="{$ ctrl.settings.general.limit_max $}">
                  <div class="input-group-btn-vertical">
                    <div class="input-group-btn-vertical-container">
                      <div class="btn-container themable-spinner-inc">
                        <button type="button"
                                class="btn themable-spinner-btn btn-default btn-xs spinner-up">
                          <span class="fa fa-caret-up hz-spinner-icon-up"></span>
                        </button>
                      </div>
                      <div class="btn-container themable-spinner-dec">
                        <button type="button"
                                class="btn themable-spinner-btn btn-default btn-xs spinner-down"
                                disabled="disabled">
                          <span class="fa fa-caret-down hz-spinner-icon-down"></span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                    <span class="help-block"
                          ng-show="searchSettingsForm.resultLimit.$error.min"
                          translate>
                      You have gone below the minimum ({$ ctrl.settings.general.limit_min $}) allowed.
                    </span>
                    <span class="help-block"
                          ng-show="searchSettingsForm.resultLimit.$error.max"
                          translate>
                      You have exceeded the maximum ({$ ctrl.settings.general.limit_max $}) allowed.
                    </span>
              </div>
            </div>
            <div class="form-group">
              <div>
                <div class="themable-checkbox">
                  <input type="checkbox"
                         ng-model="ctrl.settings.highlighting.enabled"
                         name="highlightingEnabled"
                         checked id="id_highlightingEnabled">
                  <label for="id_highlightingEnabled">
                        <span tooltip="{$ 'Search results will display the fields that matched the query.' | translate $}"
                              tooltip-placement="top"
                              tooltip-popup-delay="500"
                              tooltip-trigger="mouseenter"
                              translate>Show reason for search result</span>
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group"
                 hz-if-policies="ctrl.settings.general.all_projects_policy">
              <div>
                <div class="themable-checkbox">
                  <input type="checkbox"
                         ng-model="ctrl.settings.general.all_projects"
                         name="allProjectsEnabled"
                         checked id="id_allProjectsEnabled">
                  <label for="id_allProjectsEnabled">
                        <span tooltip="{$ 'Admins are allowed to search across projects reguardless of visibility.' | translate $}"
                              tooltip-placement="top"
                              tooltip-popup-delay="500"
                              tooltip-trigger="mouseenter"
                              translate>Search all projects</span>
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div>
                <div class="themable-checkbox">
                  <input type="checkbox"
                         ng-model="ctrl.settings.polling.enabled"
                         name="pollEnabled"
                         checked id="id_pollEnabled">
                  <label for="id_pollEnabled">
                    <span translate>Periodically update search results</span>
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="id_pollInterval">
                <span translate>Update Interval (seconds)</span>
              </label>
              <div>
                <div class="input-group themable-spinner">
                  <input class="form-control"
                         id="id_pollInterval"
                         name="pollInterval"
                         ng-disabled="!ctrl.settings.polling.enabled"
                         ng-model="ctrl.settings.polling.interval"
                         type="number"
                         min="{$ ctrl.settings.polling.interval_min $}"
                         max="{$ ctrl.settings.polling.interval_max $}">
                  <div class="input-group-btn-vertical">
                    <div class="input-group-btn-vertical-container">
                      <div class="btn-container themable-spinner-inc">
                        <button type="button"
                                class="btn themable-spinner-btn btn-default btn-xs spinner-up">
                          <span class="fa fa-caret-up hz-spinner-icon-up"></span>
                        </button>
                      </div>
                      <div class="btn-container themable-spinner-dec">
                        <button type="button"
                                class="btn themable-spinner-btn btn-default btn-xs spinner-down"
                                disabled="disabled">
                          <span class="fa fa-caret-down hz-spinner-icon-down"></span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                    <span class="help-block"
                          ng-show="searchSettingsForm.pollInterval.$error.min"
                          translate>You have gone below the minimum ({$ ctrl.settings.polling.interval_min $}) allowed.</span>
                    <span class="help-block"
                          ng-show="searchSettingsForm.pollInterval.$error.max"
                          translate>
                      You have exceeded the maximum ({$ ctrl.settings.polling.interval_max $}) allowed.
                    </span>
              </div>
            </div>
          </fieldset>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default secondary" ng-click="$dismiss()">
        <span class="fa fa-close"></span>
        <translate>Cancel</translate>
      </button>
      <button type="button"
              class="btn btn-primary"
              ng-click="$close(ctrl.model)"
              ng-disabled="searchSettingsForm.$invalid">
        <span class="fa fa-refresh"></span>
        <translate>Update Search</translate>
      </button>
    </div>
  </form>
</div>